<template>
  <div>
    <div class="header">
      <van-icon name="arrow-left" color="#fff" class="return" @click="left" />
      <div class="search">
        <h4 @click="citylist">{{ $store.state.hotcity.label }}</h4>
        <van-icon class="jiantou" name="arrow-down" @click="citylist" />
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>
    </div>

    <van-dropdown-menu>
      <van-dropdown-item title="区域">
        <van-picker
          :columns="columns"
        />
        <div class="box">
          <van-button class="cancel" type="default">取消</van-button>
          <van-button class="confirm" type="primary">确认</van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="方式">
        <van-picker
          :columns="way"
        />
      </van-dropdown-item>
      <van-dropdown-item title="租金">
        <van-picker
          :columns="rent"
        />
      </van-dropdown-item>
      <van-dropdown-item title="筛选" />
    </van-dropdown-menu>

    <van-card
      v-for="(val,index) in list"
      :key="index"
      :price="val.price+'元/月'"
      :desc="val.desc"
      :title="val.title"
      :thumb="'http://liufusong.top:8080'+ val.houseImg"
      @click="onclick(val)"
    >
      <template #tags>
        <van-tag plain type="danger">近地铁</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import { getHouses } from '@/api/home.js'
import bus from '@/bus/bus.js'
export default {
  // provide: function() {
  //   return {
  //     housesid: this.list.houseCode
  //   }
  // },
  data() {
    return {
      value: '',
      list: [],
      way: ['不限', '整租', '合租'],
      rent: ['不限', '1000', '2000'],
      houseCode: [],
      id: '',
      columns: [
        {
          text: '浙江',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
            }
          ]
        },
        {
          text: '福建',
          children: [
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ]
    }
  },

  created() {
    this.getList()
  },
  beforeDestroy() {
    bus.$emit('housesid', this.id)
  },
  methods: {
    citylist() {
      this.$router.push('/citylist')
    },
    left() {
      this.$router.push('/layout/home')
    },
    async getList() {
      const res = await getHouses()
      console.log(res.data.body.list)
      this.list = res.data.body.list
      res.data.body.list.forEach(item => {
        this.houseCode.push(item.houseCode)
      })
    },
    onConfirm() {
      this.$refs.item.toggle()
    },
    onclick(val) {
      this.$router.push('/detail/' + val.houseCode)
      this.id = val.houseCode
      // console.log(val.houseCode)
    }
  }
}
</script>

<style scoped lang='less'>
// /deep/.van-overlay{
//   display: none;
// }
.header-search{
  display: flex;
  text-align: center;
  align-items: center;
  width: 375.2px;
  height: 40px;
  .box{
    flex: 1;
  }
}
.header{
  position: relative;
  height: 50px;
  width: 100%;
  background-color:#21b97a;
}
  .search{
    position: absolute;
    display: flex;
    align-items: center;
    width: 310px;
    height: 35px;
    line-height: 6px;
    top: 8px;
    left: 32px;
    border-radius: 3px;
    background-color: #fff;
  }
  .van-search{
    padding: 0;
    width: 200px;
  }
   h4{
    font-size: 12px;
    margin-right: 3px;
    margin-left: 5px;
  }
  .jiantou{
    margin-right: 3px;
  }
  .return{
    position: absolute;
    top: 17px;
    left: 5px;
  }
  .van-card__price-currency{
    display: none;
  }
  /deep/.van-card__price-decimal{
    display: none;
  }
  #text{
    display: noen;
  }
  .van-card__price{
    font-size: 0;
  }
 /deep/ .van-overlay{
    position: unset !important;
    position: fixed !important;
  }
  .box{
    .cancel{
      width: 30%;
    }
    .confirm{
      width: 70%;
    }
  }
  .van-dropdown-menu{
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 999;
  }
//  /deep/ .van-picker-column__wrapper{
//     transform: translate3d(0px, 110px, 0px) !important;
//     margin-top: -50px;
//   }
// /deep/.van-picker__frame{
//   top:50% !important;
// }
</style>
